<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<jsp:include page="/WEB-INF/jsp/common/include_easyui.jsp"></jsp:include>
<script type="text/javascript">

jQuery(function(){
	
	var toolBarArray = [
	   {id:"addMenu",		text:"添加顶级菜单",			iconCls:"icon-add",		handler:function(){
		   addMenuFun();
	   }},
	   {id:"addSunMenu",		text:"添加子菜单",			iconCls:"icon-add",		handler:function(){
		   addSunMenuFun();
	   }},
	   {id:"edit",		text:"修改菜单",			iconCls:"icon-edit",	handler:function(){
		   editFun();
	   }},
	   {id:"delete",	text:"删除菜单",			iconCls:"icon-remove",	handler:function(){
		   deleteFun();
	   }},
	   {id:"reoload",	text:"刷新数据",			iconCls:"icon-reload",	handler:function(){
		   jQuery("#div_table").treegrid("reload");
		   
	   }}
	 ];
	
	jQuery("#div_table").treegrid({
	    //加载网格的数据
	    url:		"<%=path%>/menuMgrController/loadMenuTreeGrid?date="+new Date()+"",
		method: 'get',
		idField: 'menuId',
		treeField: 'menuName',
		iconCls: 'icon-ok',
		rownumbers: true,
		animate: true,
		fitColumns: true,
		//字段的属性
		columns:[
		      [      
					{field:'menuName',	title:'菜单名称',	width:300,halign:"center"} ,
					{field:'menuId',	title:'菜单编号',	width:300,halign:"center"} ,
					{field:'grade',	title:'菜单等级',	width:200,formatter:formatGrade,halign:"center",align:"center"} ,
					/* {field:'_parentId',	title:'父菜单',	width:300} , */
					{field:'menuTarget',	title:'菜单位置',	width:200,formatter:formatMenuTarget,halign:"center",align:"center"} ,
					{field:'isLeaf',	title:'是否是叶子菜单',	width:100,formatter:formatIsLeaf,halign:"center",align:"center"} ,
					{field:'menuHref',	title:'菜单链接',	width:500,halign:"center"}
					/* ,
					{field:'isShow',	title:'是否在展示',	width:300}  */
		      ]
	    ],
		singleSelect:		true,
		striped:			true,
		toolbar:			toolBarArray,
		onContextMenu: onContextMenu
	});
	
});


	function formatIsLeaf(isLeaf){
		if (isLeaf==1){
	    	return '<div style="color:#32CD32">是</div>';
		} else {
	    	return '<div style="color:black">不是</div>';
		}
	}

	function formatMenuTarget(menuTarget){
		if (menuTarget=='topFrame'){
	    	return '<div>顶部菜单栏</div>';
		} else if (menuTarget=='rightFrame'){
	    	return '<div>右边菜单栏</div>';
		} else if (menuTarget=='leftFrame'){
	    	return '<div>左边菜单栏</div>';
		} else if (menuTarget=='bottomFrame'){
	    	return '<div>底部菜单栏</div>';
		}
	}
	
	 
	function formatGrade(grade){
		
		/* var color = "rgb("+parseInt(Math.random()*255)+","
				 +parseInt(Math.random()*255)+","
				 +parseInt(Math.random()*255)+")"; */
		var colors = [	'#FF0000','#0000FF','#00FF00','#FF00FF',
						'#FFFF00','#32CD32','#70DB93','#9F5F9F',
						'#E47833','#8E236B','#32CD99','#3232CD','#6B8E23','#00FFFF'];
		
		if (grade==1){
	    	return '<div style="color:'+colors[grade-1]+'">顶级菜单</div>';
		} else {
	    	return '<div style="color:'+colors[grade-1]+'">第'+grade+'级菜单</div>';
		}
	}
	function onContextMenu(e,row){
		//alert("onContextMenu")
		if (row){
			e.preventDefault();
			$(this).treegrid('select', row.menuId);
			$('#mm').menu('show',{
				left: e.pageX,
				top: e.pageY
			});				
		}
	}
	function collapse(){
		alert("collapse")
		var node = $('#div_table').treegrid('getSelected');
		if (node){
			$('#div_table').treegrid('collapse', node.menuId);
		}
	}
	function expand(){
		//alert("expand")
		var node = $('#div_table').treegrid('getSelected');
		if (node){
			$('#div_table').treegrid('expand', node.menuId);
		}
	}
	
	//添加顶级菜单
	function addMenuFun(){
 		var row = $('#div_table').treegrid('getSelected');
		if(row!=null){
			$("#div_table").treegrid('unselect', row.menuId);
		}
		
		addFun(null);
	}
	
	//添加子菜单
	function addSunMenuFun(){
		//alert()
		var selectRow = jQuery("#div_table").treegrid('getSelected');
		if (selectRow == null){
			jQuery.messager.alert('添加子菜单提示','请选择父菜单','warning');
		}else{
			var parentId = selectRow.menuId;
			addFun(parentId);
		}
	}
	
	
	function addFun(parentId){
		//模态对话框
		var title;
		var addURL;
		if(parentId==null){
			title = "添加顶级菜单";
			addURL = "<%=path%>/menuMgrController/preAdd";
		}else{
			title = "添加子菜单";
			addURL = "<%=path%>/menuMgrController/preAdd/"+parentId;
		}
		
		
		jQuery('#dialog_div').dialog({    
		    title: 		title,    
		    width: 		700,    
		    height: 	500,    
		    closed: 	false,    
		    cache: 		false,    
		    modal: 		true,
		    //href: 		'<%=path%>/easyui/panel_01.jsp'		//只能加载页面中非javascript的内容。
		    content:	"<iframe id=\"testIFrame\" src='"+addURL+"' width='99%' height='98%' scrolling='no'></iframe>",
		    buttons:	[
		    			{id:"saveButton",		text:"保存数据",		iconCls:"icon-save",	handler:function(){
		    				callChild_saveData();
		    			}},
		    			{id:"closeButton",		text:"关闭窗口",		iconCls:"icon-cancel",	handler:function(){
		    				jQuery('#dialog_div').dialog("close");
		    			}}
		    ]
		}); 	
		
		
	}
	
	function editFun(){
		var selectRow = jQuery("#div_table").treegrid('getSelected');
		if (selectRow == null){
			jQuery.messager.alert('修改菜单提示','修改操作必须选择一行数据','warning');
		}else{
			var parentId = selectRow.menuId;
	
			var editURL = "<%=path%>/menuMgrController/preModify/"+parentId+"";
			jQuery('#dialog_div').dialog({    
			    title: 		"修改菜单",    
			    width: 		700,    
			    height: 	500,  
			    closed: 	false,    
			    cache: 		false,    
			    modal: 		true,
			    //href: 		'<%=path%>/easyui/panel_01.jsp'		//只能加载页面中非javascript的内容。
			    content:	"<iframe id=\"testIFrame\" src='"+editURL+"' width='99%' height='98%' scrolling='no'></iframe>",
			    buttons:	[
			    			{id:"saveButton",		text:"保存数据",		iconCls:"icon-save",	handler:function(){
			    				callChild_saveData();
			    			}},
			    			{id:"closeButton",		text:"关闭窗口",		iconCls:"icon-cancel",	handler:function(){
			    				jQuery('#dialog_div').dialog("close");
			    			}}
			    ]
			}); 			
		}
	}

	function deleteFun(){
		//Dialog对话框
		var selectRow = $('#div_table').treegrid('getSelected');
		
		if (selectRow==null){
			jQuery.messager.alert('删除提示','请选择要删除的菜单数据','warning');
		}else{
			var prompt ="提示语";
					
			//alert(selectRow.isLeaf)
			if(selectRow.isLeaf!=0){
				prompt = "您确定要删除选中的菜单吗？";
			}else{
				prompt= "您确定要删除选中的菜单及其子菜单吗？";
			}
			
			$.messager.confirm('删除提示', prompt, function(flag){
				if (flag){
					var decURL = "<%=path%>/menuMgrController/deleteMenu?date="+new Date()+"";
					var paramObj = {'delMenuId':selectRow.menuId};
					
					jQuery.post(decURL,paramObj,function(responseData){
						
						var code = responseData.code;
						
						if (code == "200"){
							$.messager.alert('我的消息','菜单信息删除成功！','info', function(){
								jQuery("#div_table").treegrid("reload");
							});
			
						}else{
							$.messager.alert('我的消息',"数据删除出错，原因 ：" + responseData.message,'error');
						}
						
					},"json");
				}
			});
			
		}
	}
		
	function callChild_saveData(){		
		var testIFrame = jQuery("#testIFrame")[0];
		var childWin = testIFrame.contentWindow;
		childWin.saveData();
	}

</script>


  </head>
  
<body class="easyui-layout"> 

	<table id="div_table" title="菜单管理" style="width:100%;height:100%;">
	</table>
	<div id="mm" class="easyui-menu" style="width:150px;">
		<div onclick="addMenuFun()" data-options="iconCls:'icon-add'">添加顶级菜单</div>
		<div onclick="addSunMenuFun()" data-options="iconCls:'icon-add'">添加子菜单</div>
		<div onclick="editFun()" data-options="iconCls:'icon-edit'">编辑菜单</div>
		<div onclick="deleteFun()" data-options="iconCls:'icon-remove'">移除菜单</div>
		<div class="menu-sep"></div>
		<div onclick="collapse()">折叠菜单</div>
		<div onclick="expand()">展开菜单</div>
	</div>
	<div id="dialog_div" style="padding: 0px;"></div> 
</body> 
</html>
